﻿@inherits LayoutComponentBase

@* Header *@
<header id="header" class="fixed w-full z-30 top-0 text-white bg-white">
    <div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 py-2">
        <div class="pl-4 flex items-center">
            <a class="toggleColour no-underline hover:no-underline font-bold text-2xl lg:text-3xl text-gray-800" href="/">
                <img src="img/ZBD.png" alt="logo" width="32" height="32" class="h-8 inline" />
                BLAZOR DIAGRAMS
            </a>
        </div>
        <div class="block lg:hidden pr-4">
            <button id="nav-toggle" class="flex items-center p-1 text-pink-800 hover:text-gray-900 focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out">
                <svg class="fill-current h-6 w-6" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <title>Menu</title>
                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                </svg>
            </button>
        </div>
        <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden mt-2 lg:mt-0 lg:bg-transparent text-black p-4 lg:p-0 z-20 bg-white" id="nav-content">
            <ul class="list-reset lg:flex justify-end flex-1 items-center">
                <li class="mr-3">
                    <a class="font-bold inline-block text-black no-underline hover:text-gray-800 hover:text-underline py-2 px-4 hover:text-palette-main"
                       href="https://github.com/Blazor-Diagrams/Blazor.Diagrams"
                       target="_blank">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="w-8 h-8" fill="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="@Icons.Github" />
                        </svg>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</header>

<div class="max-w-[90rem] mx-auto">

    @* Sidebar Toggle *@
    <div class="sticky top-0 inset-x-0 z-20 bg-white border-y px-4 sm:px-6 md:px-8 lg:hidden dark:bg-slate-900 dark:border-gray-700">
        <div class="max-w-3xl mx-auto py-2">
            <button type="button" class="flex justify-between gap-x-2 items-center w-full text-gray-500 hover:text-gray-600" data-hs-overlay="#docs-sidebar" aria-controls="docs-sidebar" aria-label="Toggle navigation">
                <span class="text-sm">Toggle Navigation</span>
                <svg class="w-5 h-5" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
                </svg>
            </button>
        </div>
    </div>

    @* Sidebar *@
    <div id="docs-sidebar" class="hs-overlay hs-overlay-open:translate-x-0 -translate-x-full transition-all duration-300 transform hidden fixed top-0 left-0 bottom-0 z-[60] w-80 py-10 px-8 overflow-y-auto scrollbar-y lg:block lg:translate-x-0 lg:top-0 lg:right-auto lg:bottom-0 lg:left-[max(0px,calc(50%-45rem))] lg:z-10 dark:scrollbar-y">
        <button type="button" class="ml-auto flex justify-end lg:hidden text-gray-500 hover:text-gray-600" data-hs-overlay="#docs-sidebar" aria-controls="docs-sidebar" aria-label="Toggle navigation">
            <span class="sr-only">Toggle Navigation</span>
            <svg class="w-5 h-5" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
            </svg>
        </button>

        @* Nav *@
        <nav id="sidebar-nav" class="relative">
            <ul class="space-y-8 pt-12">
                <ul class="space-y-1">
                    @foreach (var item in Documentation.Menu.Items)
                    {
                        var (aClasses, iconClasses) = GetMenuItemExtraClasses(item.Link);
                        <li>
                            <a class="block py-1 flex items-center lg:leading-6 text-slate-700 @aClasses" href="@item.Link">
                                @if (item.Icon != null)
                                {
                                    <div class="rounded-md p-2 mr-2 @iconClasses">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="@item.Icon" />
                                        </svg>
                                    </div>
                                }

                                @item.Title
                            </a>
                        </li>
                    }
                </ul>

                @foreach (var group in Documentation.Menu.Groups)
                {
                    <li>
                        <h5 class="mb-3 font-semibold text-slate-900 dark:text-slate-200">
                            <svg xmlns="http://www.w3.org/2000/svg"
                                 width="24"
                                 height="24"
                                 viewBox="0 0 24 24"
                                 fill="currentColor"
                                 class="inline mr-1">
                                <path d="@group.Icon" />
                            </svg>
                            @group.Title
                        </h5>
                        <ul class="ml-0.5 space-y-2 border-l-2 border-slate-100 dark:border-slate-800">
                            @foreach (var item in group.Children)
                            {
                                var classes = GetGroupMenuItemExtraClasses(item.Link);
                                <li>
                                    <a class="block py-1 pl-4 -ml-px border-l-2 border-transparent text-sm @classes" href="@item.Link">
                                        @item.Title
                                    </a>
                                </li>
                            }
                        </ul>
                    </li>
                }
            </ul>
        </nav>
    </div>

    @* Content *@
    <div class="w-full px-4 sm:px-6 md:px-8 lg:pl-[22rem]">
        <div class="max-w-3xl mx-auto xl:max-w-none py-10 xl:ml-0 xl:mr-64 xl:pr-16 pt-24 text-black">
            @Body

            <div class="pt-6 pb-10 border-t border-slate-200 sm:flex justify-between text-slate-500 dark:border-slate-200/5">
                <div class="mb-6 sm:mb-0 sm:flex">
                    <p>Copyright © 2022</p>
                </div>
            </div>
        </div>
    </div>
</div>